import React, { memo, useReducer } from "react";

import Demo1 from './demo1'

const index = memo(() => {
  const [state, dispatch] = useReducer(
    (state, action) => {
      switch (action.type) {
        case "setName":
          return {
            ...state,
            name: action.name,
          };
          break;
        case "setAge":
          return {
            ...state,
            age: action.age,
          };
        case "setName":
          break;

        default:
          return state;
      }
    },
    {
      name: "张三",
      age: 18,
    }
  );
  return <div>
      <h1> state name : {state.name}</h1>
      <h1> state age : {state.age}</h1>
      <button onClick={e=>{
          dispatch({
              type:'setName',
              name:'李狗蛋'
          })
      }} >
          set name
      </button>
      <button onClick={e=>{
          dispatch({
              type:'setAge',
              age:'123'
          })
      }} >
          set age
      </button>
      <hr/>
      <h2>把context 和 reducer 一起用</h2>
      <Demo1></Demo1>
  </div>;
});

export default index;
